<template>
  <div class="overflow-scroll  rounded-lg" style="background-color: var(--showbox);">
    <div class="w-full mt-4 ">
      <div class="flex justify-between">
        <div class="w-[90%] flex space-x-2 justify-center mb-4">
          <div v-for="(item, index) in category" :key="index">
            <div :class="ClassChoice === item.id ? 'true' : 'false'" class="w-10 text-center">
              <button @click="ClassChoice = item.id">{{ item.title }}</button>
            </div>
          </div>
        </div>
        <button @click="PushInPlayList" class="mr-4 h-8 rounded-xl bg-gray-300 px-3 font-bold leading-8">播放全部</button>
      </div>
      <div class="flex h-[3.5rem] leading-[3.5rem] bg-gray-200" v-if="!pending">
        <div class="w-4 ml-2 text-center"></div>
        <div class="w-[26%] ml-4">
          <a>名称</a>
        </div>
        <div class="w-[20%] ml-[3.5rem]">
          <p>艺术家</p>
        </div>
        <div class="w-[30%] ml-3">
          <p>专辑</p>
        </div>
        <div class="w-[10%] ml-2">
          <p>时长</p>
        </div>
      </div>
      <div v-for="item, index in data?.data" :key="index" v-if="!pending"
        class="flex justify-between h-14 leading-[3.5rem] py-2 hover:bg-gray-200  text-gray-500 overflow-hidden text-ellipsis text-sm even:bg-gray-200">
        <div class="w-4 ml-2 text-center">{{ index + 1 }}</div>
        <div class="flex w-[30%]">
          <div class="w-12 h-12 bg-cover rounded-sm flex justify-center items-center"
            :style="`background-image: url('${item.album.picUrl}')`"></div>
          <p class="pl-2">{{ item.name }}</p>
        </div>
        <div class="w-[20%]">
          <p>{{ item.artists[0].name }}</p>
        </div>
        <div class="w-[30%]">
          <p>{{ item.album.name }}</p>
        </div>
        <div>
          <p class="w-[10%]">{{ item.lMusic ? setTime(item.lMusic.playTime) :
            setTime(item.mMusic ? item.mMusic.playTime : '') }}</p>
        </div>
        <div class="flex w-[10%]"></div>
      </div>
    </div>
  </div>
</template>
<script setup>
// 导入数据
import { ref, watch } from 'vue';
import { setTime } from '~~/hook/format';
import { usePlayStore } from '~~/store';
const store = usePlayStore()
const router = useRoute()
// 新歌类别
const category = [
  { title: '全部', id: 0 },
  { title: '华语', id: 7 },
  { title: '欧美', id: 96 },
  { title: '日本', id: 8 },
  { title: '韩语', id: 16 },
];
const ClassChoice = ref(0);
const { data, pending, refresh } = await useAsyncData('albumInfo', (() => $fetch(`/api/music/getNewMusic?type=${ClassChoice.value}`)))

// 新歌类别选择
// 新歌类别设置
watch(ClassChoice, async (newvalue, oldvalue) => {
  if (newvalue != oldvalue) {
    console.log(data.value?.data);
    refresh();
  }
});
const PushInPlayList = function () {
  let arr = []
  if (data.value) {
    for (let i = 0; i < data.value.data.length; i++) {
      let tempdata = {
        cover: data.value.data[i].album.picUrl,
        name: data.value.data[i].name,
        id: Number(data.value.data[i].id),
        album: data.value.data[i].album.name,
        dt: data.value.data[i].lMusic?.playTime || data.value.data[i].mMusic?.playTime,
        singer: data.value.data[i].artists[0].name
      }
      arr.push(tempdata)
    }
    store.$patch(() => {
      store.currentMusicIndex = 0;
      store.playList = arr;
      store.playStatus = true;
      store.currentId = data.value.data[0].id
    })
  }
}
</script>
<style lang="less">
.true {
  font-weight: 700;
  border-bottom: red solid 3px;
  font-size: medium;
  border-style: groove;
}

.false {
  font-weight: 500;
}
</style>
